<template>
  <div class="wrap">
    <myHead title="确认订单"></myHead>
    <div class="address" @click="jump('addAddress')" v-show="!isShow">
      <span>添加地址</span>
      <img src="../../../static/img/add.png" alt="">
    </div>
    <div class="selectedAddress" v-show="isShow">
      <div class="select_top">
        <img class="location" src="../../../static/img/shangjiaweizhi.png" alt="" />
        <div class="sel_top" @click="jump('myAddress')" >
          <p>{{address.name}} {{address.phone}}</p>
          <div><p>收货地址：{{address.dispatching}}{{address.particular}}</p></div>
        </div>
        <img src="../../../static/img/youjiantou3.png" alt="" />
      </div>
    </div>
    <div class="info">
      <div class="infoTop">
        <div class="shopImg">
          <img src="../../../static/img/shop4.png" alt="">
        </div>
        <div class="infoMsg">
          <p>{{info.title}}</p>
<!--          <div class="msg_2"><p>灰白</p><p>均码</p></div>-->
          <div class="num">
            <p>￥{{info.price}}</p>
            <p>x<span>1</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="gray"></div>
    <div class="bottom">
      <div class="infoBot">
        <span>运费</span>
        <span>￥0</span>
      </div>
      <div class="item-1" @click="show = true">
        <div>配送方式</div>
        <div><span>{{actions[sel1].name}}</span> <img src="../../../static/img/yjt1.png" alt=""></div>
      </div>
<!--      <div class="item-1">-->
<!--        <div><span>优惠券</span><img src="../../../static/img/yhjmsg.png" alt=""></div>-->
<!--        <div><span>暂未使用</span> <img src="../../../static/img/yjt1.png" alt=""></div>-->
<!--      </div>-->
      <div class="bot-shopMsg">
        <p>买家留言</p>
        <textarea name=""  placeholder="留言保持20字以内" v-model="txtVal"></textarea>
      </div>
      <div class="money">
        <p>已优惠&nbsp;&nbsp;<span>￥0</span></p>
        <p>小计&nbsp;&nbsp;<span>￥{{info.price}}</span></p>
      </div>
    </div>
    <footer>
      确定购买
    </footer>

    <van-popup v-model="isHide" class="fkPopup">
      <div class="popup" >
        <div class="popup_box">
          <img src="../../../static/img/dingdan1.png" alt="">
          <span class="pop1">订单支付成功</span>
          <span class="pop2">店家正在为您备货</span>
          <div class="pop3" @click="jump('orderDetails')">查看订单</div>
        </div>
      </div>
      <p style="width: 100%;height: .01rem"></p>
    </van-popup>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      description="配送方式"
      @select="onSelect"
    />
  </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead"

    export default {
      name: "order",
      components: {
        myHead
      },
      data(){
        return {
          isShow:true,
          isHide:false,
          txtVal:'',
          sel1: 0,
          show: false,
          info: false,
          actions: [
            {name: '邮寄',type:0},
            {name: '同校自提',type:1},
          ],
          address:false
        }
      },
      created() {
        // 请求地址列表
        this.$myAxios('index/address/index','post',{
          user_id:this.$myStorage.query()
        }).then(res=>{
          if (res.data.state) {
            if (this.$myStorage.query('mr')){
              this.address = res.data.address[this.$myStorage.query('mr')]
            }else {
              for (var i of res.data.address) {
                if (i.type == 1){
                  this.address = i;
                  break;
                }
              }
            }
          }else {
            this.$myNotice('记得填写地址！',3000);
          }
          console.log(this.address)
        });

        this.$myAxios('index/Classify/headline_used_details', 'post',{
          user_id:this.$myStorage.query(),
          sid:this.$route.query.id
        }).then(res => {
          console.log(res);
          if(res.data.state){
            this.info = res.data.headline_used
          }
        });
      },
      methods:{
        jump(page){
          this.$router.push({
            name:page
          })
        },
        onSelect(item) {
          // 默认情况下点击选项时不会自动收起
          // 可以通过 close-on-click-action 属性开启自动收起
          this.show = false;
          this.sel1 = item.type;
        },
        submission(){
          this.isShow = !this.isShow;
        },
        popup(){
          this.isHide = true;
          $('body').css('overflow','hidden');
        },
        closePopup(){
          this.isHide = false;
          $('body').css('overflow','auto');
        }
      },
      watch:{
        txtVal(){
          this.txtVal = this.txtVal.length>20?this.txtVal = this.txtVal.substring(0,20):this.txtVal;
        }
      }
    }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
  }
  .gray{
    width: 100%;
    background-color: #F5F5F5;
    height: .1rem;
  }
  .address {
    height: .46rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .02rem .05rem 0 rgba(151, 151, 151, 0.06);
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #F5F5F5;
  }

  .address > span {
    color: #FF7611;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: 500;
  }

  .address > img {
    width: .11rem;
    height: .11rem;
    margin-left: .05rem;
  }
  .info {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .06rem .11rem 0 rgba(225, 225, 225, 0.28);
    padding: 0 .1rem 0 .1rem;
  }
  .infoTop {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom:.01rem solid #F4F4F4;
    padding-bottom: .1rem;
  }
  .infoTop .shopImg{
    width: .9rem;
    height: .9rem;
    overflow: hidden;
    border-radius: .04rem;
    position: relative;
  }
  .infoTop .shopImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .infoMsg {
    width: calc(100% - .83rem);
    margin-left: .1rem;
    height: .6rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .infoMsg > p:nth-child(1) {
    width: 100%;
    font-size: .15rem;
    line-height: .15rem;
    font-family: Adobe Heiti Std;
    font-weight: 500;
    color: #282828;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .msg_2 {
    color: #717171;
    font-size:.14rem;
    line-height: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg_2>p {
    margin-right: .1rem;
  }
  .num {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: .14rem;
  }
  .num>p:nth-child(1) {
    line-height: .14rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FF5151;
    margin-right: .3rem;
  }
  .num>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #424242;
  }
  .infoBot {
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    font-size: .14rem;
    color: #171717;
    font-family:PingFang SC;
    box-sizing: border-box;
    padding: 0 .05rem;
  }
  .bot-shopMsg {
    padding-top: .1rem;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .bot-shopMsg>textarea {
    width: 2rem;
    height: .5rem;
    resize: none;
    border: none;
    font-size:.14rem;
  }
  .bot-shopMsg>textarea::placeholder {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #717171;
    text-align: right;
  }

  .bottom {
    background:rgba(255,255,255,1);
    box-shadow:0 .6rem .11rem 0 rgba(225,225,225,0.28);
    box-sizing: border-box;
    padding: 0 .1rem;
  }
  .item,.bot_box,.item-1{
    width: 100%;
    height: .5rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: .01rem solid #F4F4F4;
  }
  .item>div>img {
    width: .17rem;
    height: .17rem;
    margin-right: .1rem;
  }
  .item-1>div:nth-child(1)>img {
    width: .6rem;
    height: .16rem;
  }
  .item-1>div>img {
    margin-left: .1rem;
  }
  .item-1>div:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .item>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .item>div>span,.bot_box>span,.bot_box>div>span,.item-1>div {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #2D2C2C;
  }
  .bot_box>div>span,.item-1>div:nth-child(2) {
    color: #717171;
  }
  .item>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7611;
  }
  .bot_box>div>img,.item-1>div:nth-child(2)>img {
    width: .05rem;
    height: .1rem;
    margin-left: .2rem;
  }



  .money {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }
  .money>p:nth-child(1) {
    color: #2D2C2C;
    font-size: .12rem;
    margin-right: .1rem;
  }
  .money>p:nth-child(2) {
    color: #2D2C2C;
    font-size: .12rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .money>p:nth-child(1)>span {
    color: #E60012;
    font-size: .12rem;
  }
  .money>p:nth-child(2)>span {
    color: #FF5151;
    font-size: .15rem;
    font-weight: bold;
  }

  footer {
    width:3.4rem;
    height:.5rem;
    line-height: .5rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    box-shadow:0 .06rem .11rem 0 rgba(255,118,17,0.4);
    margin: .45rem auto;
    border-radius: .3rem;
    justify-content: space-between;
    overflow: hidden;
    text-align: center;
    font-size: .15rem;
    font-weight: bold;
    color: #ffffff;
  }

  .selectedAddress {
    width:3.52rem;
    background:rgba(255,255,255,1);
    border-radius:.07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    box-sizing: border-box;
    padding: 0 .1rem;
  }
  .select_top {
    border-bottom: .01rem solid rgba(244,244,244,1);
    width: 100%;
    padding: 0 0 .1rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .select_top img{
    width: .08rem;
    height: .15rem;
    margin-right: .1rem;
  }
  .select_top .location{
    width: .17rem;
    height: .25rem;
  }
  .sel_top {
    width: 90%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .sel_top>div {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .sel_top>div>img {
    width: .31rem;
    height: .2rem;
    margin-right: .1rem;
  }
  .sel_top>div>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
  }
  .sel_top>p{
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #3D3D3D;
    margin-bottom: .05rem;
  }
  .select_bot {
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .select_bot {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  .select_bot>span:nth-child(1) {
    color: #171717;
  }
  .select_bot>span:nth-child(2) {
    color: #FF7611;
  }

  .popup {
    width: 100%;
    height: 100%;
  }
  .popup>img:nth-child(2) {
    width: .3rem;
    height: .3rem;
    position: absolute;
    right: .3rem;
    top: 20%;
    z-index: 9999;
  }

  .popup_box {
    width:2.6rem;
    min-height:2.55rem;
    background:rgba(255,255,255,1);
    border-radius:.07rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: .25rem 0 .35rem;
  }
  .popup_box>img {
    width: .93rem;
    height: .86rem;
  }
  .pop1 {
    font-size:.2rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #FF7611;
  }
  .pop2 {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
    margin: .05rem 0;
  }
  .pop3 {
    width:1.73rem;
    height:.38rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.19rem;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #ffffff;
    line-height: .38rem;
    text-align: center;
    letter-spacing: .02rem;
  }
  .bodyHide {
    overflow: hidden;
  }

  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }
</style>
